[제이쿼리] input 체크박스, 라디오 상태를 체크 또는 해제 방법

Last Modified : 2019-08-07 / Created : 2015-12-26

13,315
View Count

주소 복사하기

웹페이지 퍼블리싱시 입력폼을 만들 경우가 매우 많습니다. 특히 admin, cms, 백오피스 기능을 구현하는 경우 자주 사용되죠. 그 중에서도 가장 많이 만드는 태그가 바로 input 태그로 태그를 사용해 체크박스 또는 라디오 버튼을 많이 구현합니다.

# 제이쿼리를 사용하여 체크박스 또는 라디오 박스 클릭 상태 변경하기

만약 개발자가 프로그램을 통해 실제로 버튼을 클릭하지 않고 input 태그의 상태를 클릭하거나 하지 않은 상태로 변경하려면 어떻게해야할까요? 먼저 가장 손쉬운 방법으로 자바스크립트의 제이쿼리를 사용하는 방법이 있을 것입니다.

제이쿼리의 prop() 속성을 사용하면 매우 간단하게 체크박스나 라이도 박스의 상태를 변경할 수 있습니다. prop() 속성은 attr() 속성과 매우 비슷한데 현재 속성값을 가져오거나 변경할 수 있는 매우 유용한 메소드입니다. 이를 사용해 어떻게 하면 상태값을 변경할 수 있는지 알아보세요.

$(선택요소).prop('checked', true or false);

위 내용은 매우 간단한 사용방법입니다. 위와 같은 방법으로 사용할 경우 input 태그의 상태를 변경할 수 있게됩니다. 그럼 아래를 통해 함수를 하나 만들고 클릭 상태를 변경해보는 간단한 예제를 만들어보세요.

# input 체크박스, 라디오 버튼 체크 또는 해제 예제보기

아래 예제를 보세요. 아래의 체크박스를 제이쿼리를 사용하여 변경해보려합니다.

<div>
<input id="test" type="checkbox" /> 체크박스
<button onclick="clickCheckbox();">Click!</button>
</div>

여기서는 test라는 아이디값을 가진 input 요소를 만들었습니다. 이 예제에서는 이 태그의 값을 변경하여 실제 클릭하지 않았으나 값을 변경해 클릭상태로 변경해보려합니다. 아래는 스크립트 코드로 click() 함수를 구현한 부분입니다.

var clickCheckbox = function() {
$( "#test" ).prop( "checked", true );
}

이 예제소스를 실행하면 아래와 같이 브라우저에 나타나게됩니다. 이때 click() 함수를 실행하면 클릭 상태로 바뀌게 되겠죠. 클릭함수를 클릭해보거나 콘솔(console)창에 click()을 입력해보자. 변화된 클릭 상태를 확인할 수 있을 것이다. 그럼 실제로 아래에서 클릭해보시기 바랍니다.

# 작성한 예제 실제로 구현해보기

아래의 버튼을 클릭할 경우 함수가 동작하게됩니다. 버튼을 클릭하세요!

<div>
<input id="test" type="checkbox" /> 체크박스
<button onclick="clickCheckbox();">Click!</button>
</div>
<script>
clickCheckbox = function() {
$( "#test" ).prop( "checked", true );
}
</script>

클릭 후 체크박스 상태를 확인해보세요. 체크 상태로 바뀌었다면 정상 구동되었습니다.

아래의 글도 찾고 계시지 않나요?

제이쿼리 is() 메소드 배우기

[제이쿼리 UI] 캘린더 UI datepicker 한글로 변경하기, 로컬라이제이션